<template>
  <div class="guide-title">
    <div class="guide-menu">
      <div
        v-for="(item, index) of menuList"
        :key="index"
        class="menu-item"
        :class="
          index != menuIndex ? 'color-normal' : 'color-normal color-light'
        "
      >
        <span>0{{ index + 1 }}</span>
        <i :class="item.icon" />
        <div>{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GuideTitle',
  components: {},
  props: {
    menuList: {
      type: Array,
      default: []
    },
    menuIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.guide-title {
  width: 100%;
  height: 100%;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
  --color-normal-border: rgb(40, 110, 139);
  --color-normal-font: rgb(25, 115, 151);
  --margin-menu: 100px;

  .guide-menu {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    .menu-item {
      margin: 0 var(--margin-menu);
      height: 44px;
      font-size: 16px;
      font-weight: bolder;
      border-radius: 15px;

      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
        margin-right: 10px;
        transform: skew(-5deg);
      }

      i {
        height: 100%;
        display: flex;
        align-items: center;
        padding-right: 10px;
      }

      div {
        display: flex;
        align-items: center;
        height: 100%;
        padding-left: 10px;
        padding-right: 10px;
      }

      &:not(:last-child) div::after {
        position: absolute;
        content: "";
        left: 100%;
        height: 3px;
        width: calc(var(--margin-menu) * 2);
        background: var(--color-normal-border);
      }
    }

    .color-normal {
      border: 3px solid var(--color-normal-border);
      color: var(--color-normal-font);
      position: relative;

      i {
        border-right: solid 3px var(--color-normal-border);
      }
    }

    .color-light {
      border: 3px solid var(--guide-title-light-border-color);
      color: var(--guide-title-light-font-color);

      i {
        border-right: solid 3px var(--guide-title-light-border-color);
      }

      div {
        background: var(--guide-title-light-background-color);
        border-top-right-radius: 13px;
        border-bottom-right-radius: 13px;
        color: var(--guide-title-light-div-font-color);
      }
    }
  }
}
</style>
